<template>
  <div id="box" style="width: 35%; height: 300px"></div>
</template>

<script>
import * as echarts from "echarts";
import { getLastAge } from "@/api/data";
export default {
  name: "Lastday",
  data() {
    return {
      list: {},
    };
  },
  methods: {
    myEcharts() {
      var chartDom = document.getElementById("box");
      var myChart = echarts.init(chartDom, "dark");
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "昨日顾客年龄",
          top: "5%",
          padding: "50",
          textStyle: {
            fontSize: 14,
            fontStyle: "normal",
            fontWeight: "normal",
          },
        },
        legend: {
          top: "5%",
          left:'center'
        },
        series: [
          {
            name: "类别人数",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.list.old, name: "老年" },
              { value: this.list.prime, name: "中年" },
              { value: this.list.young, name: "青年" },
              { value: this.list.child, name: "孩童" },
            ],
          },
        ],
      };
      option && myChart.setOption(option, true);
    },
  },
  // mounted() {
  //   this.myEcharts();
  // },
  created() {
    getLastAge().then((res) => {
      this.list = res.data.list[0];
      this.myEcharts();
      // console.log(this.list);
    });
  },
};
</script>

<style>
</style>